<template>
  <div class="app-container container">
    <el-card  shadow="always" :body-style="{ padding: '20px' }">
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-button type="primary" size="small" @click="create()">创建问卷</el-button>
          
        </el-col>
      </el-row>
      <el-divider direction="horizontal" content-position="left"></el-divider>
      
      <el-table :data="list" border stripe>
        <el-table-column align="center" label="ID" width="40px" prop="id"></el-table-column>
        <el-table-column align="center" label="问卷名" prop="title"></el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="{row}">
            <el-tag size="small" v-if="row.is_active" type="success">发布中</el-tag>
            <el-tag size="small" v-else type="danger">未发布</el-tag>

          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="所在组" >
          <template slot-scope="{row}">
            <el-tag v-for="item in row.groups" size="mini" :key="item.id">{{item.name}}</el-tag>
          </template>
        </el-table-column> -->
        <el-table-column
        width="100px"
          align="center"
          label="填写数量"
          prop="submit_count"
        ></el-table-column>
        <el-table-column width="200px" align="center" label="创建时间">
          <span slot-scope="{ row }">
            {{ row.create_time | formatDate }}
          </span>
        </el-table-column>
        <el-table-column align="center" label="操作">

          <template slot-scope="{ row }">
            <el-button
              type="danger"
              plain
              size="small"
              @click="deleteSurvey(row.id,row.submit_count)"
              >删除</el-button
            >

            <el-button
              type="warning"
              plain
              size="small"
              @click="upadteSurvey(row.id)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>

    </el-card>
  </div>
</template>

<script>
import { getSurvey, getSurveyById, getSubmitSurvey ,deleteSurvey,addSurvey} from "@/api/index";
export default {

  data() {
    return {
      list: [],
      show: false,
      questions: [],
      id: null,
    };
  },
  filters: {
    formatDate(date) {
      return new Date(date).toLocaleString();
    },
  },
  mounted() {
    this.getSurvey();
  },

  methods: {
    getSurvey() {
      getSurvey().then((res) => {
        this.list = res;
      });
    },
    deleteSurvey(id){
      deleteSurvey(id).then(res=>{
        this.$message.success('删除成功')
        this.getSurvey()
      })
    },
    upadteSurvey(id){
      this.$router.push({name:'Update',query:{id:id}})
    },
    create(){
      addSurvey({text:"[]",title:"新问卷",logic:"[]",setting:JSON.stringify({process:'',business:'',num:1,icon:"icon-xinpin"})}).then(res=>{
        this.$router.push({name:'Update',query:{id:res.id}})
      })
    }
  },
};
</script>

<style>
</style>